<!-- 预约管理 -->
<template>
  <div class="main-content-container">
    <!-- 表单区域 -->
    <div ref="search" class="app-search">
      <el-form ref="searchFormRef" label-width="80px" :inline="true">
        <el-row type="flex" justify="space-between">
          <el-col :span="12" class="searchs-y">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="buttons" :offset="14">
            <el-button style="margin-top: 15px;" @click="subscribeBtn(1)">+ 增加预约</el-button>
          </el-col>
        </el-row>
        <el-row class="float-l" type="flex">
          <Search :data="selections" :attribute="'appointmentDate'" @dateChange="handleDateChange" @change="handleTypeChange" />
          <dictionary-selector placeholder="请选择咨询类型" class="dictSelector el-select-y" code="swan_cutomer_yylx" :value.sync="searchForm.appointmentType" @change="handleAppointmentType" />
          <dictionary-selector placeholder="请选择来源渠道" class="dictSelector el-select-y" code="swan_cutomer_yyly" :value.sync="searchForm.appointmentSource" @change="handleSourceChange" />
        </el-row>
        <el-row class="mounteds">
          <!-- <TypeSelection :data="filtrateList" :default-value="searchForm.appointmentStatus" :on-change="handleConditionChange" /> -->
          <Tabs v-model="searchForm.appointmentStatus" :data="filtrateList" @change="handleConditionChange" />
        </el-row>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="chargeList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="顾客姓名" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
        <el-table-column label="电话号码" prop="customerPhone" :show-overflow-tooltip="true" />
        <el-table-column label="预约类型" prop="appointmentType" :show-overflow-tooltip="true" />
        <el-table-column label="咨询分类/项目" :show-overflow-tooltip="true" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.appointmentType === '咨询预约'">{{
              scope.row.advisoryClassification
            }}</span>
            <span v-else>{{ scope.row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="咨询师" prop="receiverName" :show-overflow-tooltip="true" />
        <el-table-column label="预约时间" :show-overflow-tooltip="true" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.appointmentDate }}</span>
            <span>{{ scope.row.appointmentTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预约来源" prop="appointmentSource" :show-overflow-tooltip="true" />
        <el-table-column label="预约状态" prop="appointmentStatus" :show-overflow-tooltip="true" />
        <el-table-column v-if="appointmentStatus === '预约中'" label="剩余时间" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.appointmentStatus === "预约中"? scope.row.remainingTime: "" }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else label="到店时间" prop="arrivalTime" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.appointmentStatus === "已到达"? scope.row.arrivalTime: "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="lookBtn(scope.row)">查看</el-button>
            <el-button v-if="scope.row.appointmentStatus === '预约中'&&scope.row.appointmentType==='咨询预约'" type="text" @click="subscribeBtn(scope.row,2)">修改</el-button>
            <el-button v-if="scope.row.appointmentStatus === '预约中'&&searchForm.timeType==='today'" type="text" @click="signInBtn(scope.row)">分诊</el-button>
            <el-button v-if="scope.row.appointmentStatus === '预约中'&&scope.row.appointmentType==='咨询预约'" type="text" @click="cancelBtn(scope.row)">取消预约</el-button>
            <el-button v-if="scope.row.appointmentStatus === '已过期' ||scope.row.appointmentStatus === '已取消'" type="text" @click="subscribeBtn(scope.row,3)">重新预约</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>

    <!-- 新增预约 -->
    <Subscribe ref="addSubscribeRef" :title="title" :text-btn="textBtn" :visible.sync="subscribeVisible" :flag="false" @success="getChargeList" @addTriage="addTriageBtn" />
    <Triage ref="addTriageRef" :title="'增加分诊'" :visible.sync="triageVisible" :flag="false" @dialogClose="getChargeList" />
  </div>
</template>
<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import { DictionarySelector } from "@rabbit.do/rabbit";
// import { TypeSelection } from "@monkey.do/monkey";
import Search from "@/components/Search";
import { backUp } from "@/config";
import Subscribe from "./dialog";
import Triage from "../../triage/management/dialog";
import { tableColor, labelHeigh } from '@/utils/common.js';
import Tabs from "@/components/SearchSelection";
export default {
  components: {
    // TypeSelection,
    DictionarySelector,
    Search,
    Subscribe,
    Triage,
    Tabs,
  },
  data() {
    return {
      appointmentStatus: '预约中',
      selections: backUp,
      filtrateList: [
        {
          name: "全部",
          id: "全部",
        },
        {
          name: "预约中",
          id: "预约中",
        },
        {
          name: "已到达",
          id: "已到达",
        },
        {
          name: "已过期",
          id: "已过期",
        },
        {
          name: "已取消",
          id: "已取消",
        },
      ],
      searchForm: {
        appointmentStatus: "预约中",
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      tableColor,
      innerHeight: null,
      total: 0,
      chargeList: [],
      custQuery: '',
      title: "",
      textBtn: "",
      loading: false,
      flag: false,
      subscribeVisible: false,
      triageVisible: false,
      timer: null, // 定时器
    };
  },
  created() {
    this.getChargeList();
    // 1min刷新一下
    this.timer = setInterval(() => {
      this.getChargeList();
    }, 1000 * 60);
  },
  mounted() {
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  // 判断如果定时器还在运行就关闭 或者直接关闭
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    handleChange() {
      this.params.page = 1;
      this.getChargeList();
    },
    async getChargeList() {
      if (!this.searchForm.appointmentDate) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.appointmentDate = beginTime + "_" + endTime;
      }
      this.loading = true;
      const res = await this.$api["reception/subscribe/appointmentlist"]({ ...this.params, query: this.searchForm, custQuery: this.custQuery });
      this.loading = false;
      if (res.code !== 200) return this.$message.error("查询预约列表失败！");
      if (res.data.result.length < 1 && this.flag) {
        this.title = "暂无预约";
        this.triageVisible = true;
      }
      this.chargeList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      // this.flag = true; // 无预约弹框
      this.getChargeList();
    },
    // 增加预约
    subscribeBtn(row, number) {
      if (number === 3) {
        this.title = "重新预约";
      } else if (number === 2) {
        this.title = "修改预约";
      } else {
        this.title = "新增预约";
      }
      this.textBtn = "提交";
      this.flag = false;
      this.subscribeVisible = true;
      this.$refs.addSubscribeRef.addSubscribeBtn(JSON.parse(JSON.stringify(row)), this.searchForm);
    },
    judgeConditions() {
      this.flag = false;
      this.subscribeVisible = true;
      // this.triageVisible = false;
    },
    // 查看
    lookBtn(row) {
      this.title = "查看预约";
      this.textBtn = "确认";
      this.judgeConditions();
      this.$refs.addSubscribeRef.lookBtn(row, this.searchForm);
    },
    // 签到
    async signInBtn(row) {
      // this.title = "预约签到";
      // this.textBtn = "签到并分诊";
      // this.judgeConditions();
      this.$set(row, 'appointmenId', row.id);
      this.$set(row, 'adviserName', row.receiverName);
      this.$set(row, 'arrangeType', '点排');
      this.$set(row, 'arrangeTypeDoc', '点排');
      this.addTriageBtn(row);
      // this.$refs.addSubscribeRef.signInBtn(row, this.searchForm);
    },
    // 取消预约
    cancelBtn(row) {
      this.title = "取消预约";
      this.textBtn = "提交";
      this.judgeConditions();
      this.$refs.addSubscribeRef.cancelBtn(row, this.searchForm);
    },
    addTriageBtn(row) {
      this.triageVisible = true;
      this.$nextTick(() => {
      //   // this.title = "添加分诊";
        console.log(row, "9999");
        this.$set(row, 'adviserType', row.advisoryClassification);
        this.$set(row, 'treatType', row.treatType);
        this.$refs.addTriageRef.addTriageBtn(row);
        this.$refs.addTriageRef.getAllCustomerInformation(row);
      });
    },
    // 顶部时间筛选
    handleDateChange(val) {
      this.searchForm.appointmentDate = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      this.searchForm.appointmentDate = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    // 预约类型
    handleAppointmentType() {
      this.getChargeList();
    },
    // 预约来源
    handleSourceChange() {
      this.getChargeList();
    },
    handleConditionChange(val) {
      if (val === "全部") {
        this.searchForm.appointmentStatus = '';
      }
      console.log(val, "00000");
      // this.appointmentStatus = val;
      this.triageVisible = false;
      this.getChargeList();
    },
    eliminate() {
      this.custQuery = '';
      this.searchForm = {};
      this.params.page = 1;
      this.getChargeList();
    },
  },
};
</script>
<style lang="scss" scoped>
.divs {
  text-align: center;
  p {
    margin: 20px 0;
    span {
      margin: 0 15px;
    }
    .el-button {
      margin: 0 45px;
    }
  }
}
.dateStyle {
  margin-bottom: 0;
}
::v-deep .el-autocomplete {
  width: 100%;
}

.mounteds {
  margin: 10px 0;
}
.float-l .el-form-item.el-form-item--small, .float-l .dictSelector, .float-l .el-select--small.el-select-y{
  margin-right: 0px !important;
}
</style>
